<template>
  <div class="user-container">
    <div class="user-header">
      <div class="user-des">
        <van-image
          class="user-icon"
          :src="meHeaderIcon"
          round
          fit="scale-down"
        />
        <!-- 用户登录信息 -->
        <div>
          <div v-if="hasLogin" class="user-self">
          <span class="user-name">金鱼的记忆只有7秒</span>
          <span class="user-phone">13570524409</span>
          </div>
          <div v-else class="user-self-login">
            <van-button round size="small" @click="toLogin">未登录</van-button>
          </div>
        </div>
        <!-- 签到按钮 -->
        <van-button
          size="small"
          round
          class="user-btn-sign"
          :disabled="isSign"
          @click="onSignIn">
          {{isSign?'已签到':'签到'}}
        </van-button>
      </div>
      <!-- 用户操作浏览记录 -->
      <van-row class="user-msg">
        <van-col span="8" class="user-msg-item">
          <p>{{myData.faverCount}}</p>
          <p>收藏</p>
        </van-col>
        <van-col span="8" class="user-msg-item">
          <p>{{myData.followCount}}</p>
          <p>关注</p>
        </van-col>
        <van-col span="8" class="user-msg-item">
          <p>{{myData.integralCount}}</p>
          <p>积分</p>
        </van-col>
      </van-row>
    </div>
    <van-row class="user-enters">
        <van-col span="8"
          v-for="(item,index) in meEnters"
          :key="index">
          <router-link :to="item.link">
            <van-icon size="30" :name="item.icon" />
            <p>{{item.title}}</p>
          </router-link>
        </van-col>
      </van-row>
    <van-cell-group class="user-heandle">
      <van-cell
        v-for="(item,index) in handleData"
        :key="index"
        :icon="item.icon"
        :title="item.title"
        :to="item.link"
        is-link />
    </van-cell-group>
    <van-icon @click="onSetting" class="user-setting" name="setting-o" size="22" />
  </div>
</template>

<script>
import { Base64 } from 'js-base64'
import headerDefaultIcon from '../../assets/images/header-default.png'

export default {
  name: "User",
  components: {
  },
  data() {
    return {
      myData: {
        faverCount: 0,
        followCount: 0,
        integralCount: 0
      },
      isSign: false,
      meEnters: [
        { link: '/user/subscribe', icon: require('../../assets/images/enters/m-subscribe.png'), title: '预约记录'},
        { link: '/user/comment', icon: require('../../assets/images/enters/m-comment.png'), title: '我的评论'},
        { link: '/user/adviser', icon: require('../../assets/images/enters/m-adviser.png'), title: '私人顾问'}
      ],
      handleData: [
        {
          link: '/user/about',
          icon: require('../../assets/images/enters/about.png'),
          title: '关于 Yi Mi',
        },
        {
          link: '/user/chat',
          icon: require('../../assets/images/enters/chat.png'),
          title: '联系客服',
        },
        {
          link: '/user/feedback',
          icon: require('../../assets/images/enters/feedback.png'),
          title: '用户反馈',
        },
        {
          link: '/user/help',
          icon: require('../../assets/images/enters/help.png'),
          title: '帮助中心',
        },
        {
          link: '/user/invite',
          icon: require('../../assets/images/enters/invite.png'),
          title: '邀请好友',
        }
      ],
      meHeaderIcon: headerDefaultIcon
    }
  },
  mounted() {},
  computed: {
    hasLogin() {
      let isLogin = false
      if (localStorage.getItem('token')) {
        hasToken = true
      }
      return isLogin
    },
  },
  methods: {
    onSignIn() {
      if (!this.isSign) {
        // TODO
        this.isSign = true
        this.$toast('签到成功')
      }
    },
    onSetting() {
      // TODO
      this.$toast('点击设置')
      this.$router.push({path: '/user/setting'})
    },
    toLogin() {
      // 引导登录
      this.$toast('登录先')
      this.$router.push({path: '/login'})
    },
    toShaft() {
      // 分享
    }
  }
}
</script>

<style lang="scss">
@import '../../assets/style/global.scss';

.user-container {
  position: relative;
  width: 100%;
  .user-header {
    position: relative;
    width: 100%;
    height: 210px;
    color: #fff;
    display: flex;
    background: #00e1f1;
    flex-direction: column;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    box-sizing: border-box;
    .user-des {
      position: relative;
      width: 100%;
      height: 60px;
      margin-top: 40px;
      margin-bottom: 16px;
      padding-left: 80px;
      box-sizing: border-box;
      .user-icon {
        width: 64px;
        height: 64px;
        position: absolute;
        left: 10px;
        top: 0;
        z-index: 99;
        display: inline-block;
      }
      .user-self-login {
        font-size: 16px;
        padding: 16px 8px;
        .van-button {
          border: none;
          background: #00e1f1;
          background: #f8986b;
          color: #fff;
        }
      }
      .user-self {
        @include flex(column);
        font-size: 16px;
        padding: 10px 8px;
        .user-name {
          font-weight: 600;
        }
        .user-phone {
          margin-top: 4px;
          font-size: 14px;
        }
      }
      .user-btn-sign {
        position: absolute;
        right: 26px;
        top: 16px;
        z-index: 99;
        @include btn;
        background: #f8986b;
        color: #fff;
      }
    }
    .user-msg {
      width: 100%;
      padding: 0 36px;
      font-size: 16px;
      font-weight: 600;
      .user-msg-item {
        @include center;
        flex-direction: column;
        font-size: 18px;
        p:nth-child(2) {
          font-size: 10PX;
        }
      }
    }
  }
  .user-enters {
      width: 92%;
      position: absolute;
      left: 4%;
      top: 166px;
      z-index: 99;
      padding: 16px;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 6px 10px rgba(175, 175, 175, 0.5);
      a {
        @include flex(column);
        align-items: center;
        justify-content: center;
        p {
          font-size: 12px;
          font-weight: 600;
          color: $colorTextEnter;
        }
      }
    }
    .user-setting {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 99;
    }
  .user-heandle {
    padding: 56px 10px 0 10px;
  }
  .user-setting {
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 99;
    color: #fff;
  }
}
</style>
